<template>
	<view class="userBox flex">
		<view class="userInfoBox flex">
			<view class="userMessages flex col-fff" @click="toPersonalInformation">
				<u-avatar :src="userInfo.image" size="50"></u-avatar>
				<text class="userName right-5">{{userInfo.is_login?(userInfo.login?userInfo.nickname:'头像/昵称'):'登录/注册'}}</text>
			</view>
		</view>
		<view class="shareBox">
			<button open-type="share" class="share flex">
				<u-icon name="share-fill" color="#FFFFFF" size="28"></u-icon>
				<text>分享</text>
			</button>
		</view>
	</view>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useUserInfoStore } from '@/store/index';
import { checkLogin } from '@/common/common';

const userInfoStore = useUserInfoStore();
const { userInfo } = storeToRefs(userInfoStore);

const props = defineProps({
	productId: {
		type: [String, Number],
		default: ''
	}
})

// 跳转至个人资料
function toPersonalInformation(){
	if(!checkLogin()) {
		uni.navigateTo({
			url: `/pages/login/login?productId=${props.productId}`
		})
		return
	}
	uni.navigateTo({
		url: `/pages/login/user-info-form`
	})
}
	

</script>

<style lang="scss" scoped>
.userBox{
	justify-content: space-between;
	margin: 0rpx 0rpx 40rpx 0rpx;
	.userInfoBox{
		width: calc(100% - 130rpx);
		justify-content: flex-start;
		.userMessages{
			justify-content: flex-start;
		}
		.getUserBtn{
			background: none;
			margin: 0;
			padding: 0;
			&::after{
				border: none;
			}
		}
		.userName{
			font-size: 34rpx;
			margin-left: 26rpx;
		}
	}
	.shareBox{
		.share{
			color: #FFFFFF;
			font-size: 28rpx;
			width: 128rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 23rpx;
			background: rgba(255,255,255,.3);
			padding: 0;
			&::after{
				border: none;
			}
		}
	}
}
</style>
